<template>
  <div class="app-item-contain train-contain">
    <img
      class="back"
      @click="back"
      src="@/assets/bg-close.svg"
    />
    <none-show v-if="trainNoneShow" />
    <div v-else>
      <el-card shadow="never">
        <div class="train-head">
          <div>
            <div class="train-name">{{ train.name }}</div>
            <div class="train-item-label">课程数量：{{ train.itemCount }}</div>
            <div class="train-item-label">
              课程时长：{{ train.studyTimeStr }}
            </div>
            <div class="train-item-label">开始时间：{{ train.startTime }}</div>
            <div class="train-item-label">结束时间：{{ train.endTime }}</div>
          </div>
          <div>
            <img
              :src="train.coverPath"
              style="width: 240px; height: 135px; margin-right: 30px"
            />
          </div>
        </div>
      </el-card>

      <el-tabs
        v-model="activeName"
        type="border-card"
        class="train-content-tab"
      >
        <el-tab-pane
          label="描述"
          name="description"
        >
          <div
            class="train-description train-tab-content"
            v-html="train.description"
          ></div>
        </el-tab-pane>
        <el-tab-pane
          label="课程"
          name="course"
        >
          <div class="train-tab-content">
            <div
              v-for="item in train.materialList"
              :key="item.itemOrder"
              v-debounce
              @click="courseWatch(item)"
            >
              <div class="train-course-item">
                <div class="train-course-item-left">
                  <el-icon>
                    <video-play v-if="item.fileType === 1" />
                    <document v-else-if="item.fileType === 2" />
                  </el-icon>
                </div>
                <div class="train-course-item-content">
                  {{ item.itemOrder }}. {{ item.name }}
                </div>
                <div
                  class="train-course-item-right"
                  v-if="item.publicityUserItemId !== null"
                >
                  <el-progress
                    :text-inside="true"
                    :stroke-width="20"
                    :status="item.status === 2 ? 'success' : ''"
                    :percentage="item.percentage"
                  >
                    <div class="progress-content">
                      {{ item.currentNumberStr }} / {{ item.passNumberStr }}
                    </div>
                  </el-progress>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { VideoPlay, Document } from '@element-plus/icons-vue';
import { select, start } from '@/api/corporatePromotion';

export default {
  components: { VideoPlay, Document },
  data() {
    return {
      activeName: 'description',
      trainNoneShow: false,
      paperNoneShow: false,
      credentialNoneShow: false,
      train: {
        name: undefined, //名称
        itemCount: undefined, //课程数量
        studyTimeStr: undefined, //课程时间
        startTime: undefined, //开始时间
        endTime: undefined, //结束时间
        materialList: [] //课件列表
      },
      trainId: null,
      isChecking: false //是否执行检查课件记录生成
    };
  },
  created() {
    this.activeName = 'description';
    let id = this.$route.query.id;
    if (id && parseInt(id) !== 0) {
      this.trainId = id;
      select(id)
        .then(re => {
          if (re.code === 1) {
            let response = re.response;
            this.paperNoneShow = response.examPaper === null;
            this.credentialNoneShow = response.credential === null;
            response.description = response.description.replaceAll(
              '\n',
              '<br/>'
            );
            this.train = response;
          } else {
            this.$message.error(re.message);
          }
        })
        .finally(() => {});
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    async courseWatch(item) {
      if (this.isChecking) return;
      this.isChecking = true;
      await this.checkStart(item, 1);
      if (item.fileType === 1) {
        this.isChecking = false;
        window.open(
          `#/course/ware/video?uId=${item.publicityUserItemId}&cId=${item.targetId}&isCorporatePromotionFlg=true`,
          '_self'
        );
      } else if (item.fileType === 2) {
        this.isChecking = false;
        window.open(
          `#/course/ware/pdf?uId=${item.publicityUserItemId}&cId=${item.targetId}&isCorporatePromotionFlg=true`,
          '_self'
        );
      }
    },
    async checkStart(trainItem, type) {
      if (null == trainItem.publicityUserItemId) {
        let res = await start(this.trainId);
        this.train = res.response;
        if (type === 1) {
          this.train.materialList.forEach(item => {
            if (item.targetId === trainItem.targetId) {
              trainItem.publicityUserItemId = item.publicityUserItemId;
            }
          });
        }
      }
    }
  }
};
</script>
